<!--
 * @Author: wrngygy
 * @Date: 2025-07-01
 * @Description: 系统设置页面
-->

<template>
	<div class="system-settings">
		<el-row :gutter="20">
			<el-col :span="24">
				<el-card>
					<template #header>
						<span>系统设置</span>
					</template>

					<el-tabs v-model="activeTab" type="border-card">
						<!-- 基础设置 -->
						<el-tab-pane label="基础设置" name="basic">
							<el-form
								:model="basicForm"
								:rules="basicRules"
								ref="basicFormRef"
								label-width="120px"
							>
								<el-form-item label="系统名称" prop="systemName">
									<el-input v-model="basicForm.systemName" />
								</el-form-item>
								<el-form-item label="系统描述" prop="systemDesc">
									<el-input
										v-model="basicForm.systemDesc"
										type="textarea"
										:rows="3"
									/>
								</el-form-item>
								<el-form-item label="系统版本" prop="systemVersion">
									<el-input v-model="basicForm.systemVersion" />
								</el-form-item>
								<el-form-item label="联系邮箱" prop="contactEmail">
									<el-input v-model="basicForm.contactEmail" />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="saveBasicSettings">
										保存设置
									</el-button>
									<el-button @click="resetBasicForm">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

						<!-- 安全设置 -->
						<el-tab-pane label="安全设置" name="security">
							<el-form
								:model="securityForm"
								:rules="securityRules"
								ref="securityFormRef"
								label-width="120px"
							>
								<el-form-item label="密码策略">
									<el-checkbox-group v-model="securityForm.passwordPolicy">
										<el-checkbox label="requireUppercase">包含大写字母</el-checkbox>
										<el-checkbox label="requireLowercase">包含小写字母</el-checkbox>
										<el-checkbox label="requireNumbers">包含数字</el-checkbox>
										<el-checkbox label="requireSpecialChars">包含特殊字符</el-checkbox>
									</el-checkbox-group>
								</el-form-item>
								<el-form-item label="最小密码长度" prop="minPasswordLength">
									<el-input-number
										v-model="securityForm.minPasswordLength"
										:min="6"
										:max="20"
									/>
								</el-form-item>
								<el-form-item label="登录失败锁定">
									<el-switch v-model="securityForm.loginLockEnabled" />
								</el-form-item>
								<el-form-item
									label="最大失败次数"
									prop="maxLoginAttempts"
									v-if="securityForm.loginLockEnabled"
								>
									<el-input-number
										v-model="securityForm.maxLoginAttempts"
										:min="3"
										:max="10"
									/>
								</el-form-item>
								<el-form-item label="会话超时(分钟)" prop="sessionTimeout">
									<el-input-number
										v-model="securityForm.sessionTimeout"
										:min="5"
										:max="1440"
									/>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="saveSecuritySettings">
										保存设置
									</el-button>
									<el-button @click="resetSecurityForm">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

						<!-- 邮件设置 -->
						<el-tab-pane label="邮件设置" name="email">
							<el-form
								:model="emailForm"
								:rules="emailRules"
								ref="emailFormRef"
								label-width="120px"
							>
								<el-form-item label="SMTP服务器" prop="smtpHost">
									<el-input v-model="emailForm.smtpHost" />
								</el-form-item>
								<el-form-item label="SMTP端口" prop="smtpPort">
									<el-input-number v-model="emailForm.smtpPort" />
								</el-form-item>
								<el-form-item label="发件人邮箱" prop="senderEmail">
									<el-input v-model="emailForm.senderEmail" />
								</el-form-item>
								<el-form-item label="发件人密码" prop="senderPassword">
									<el-input
										v-model="emailForm.senderPassword"
										type="password"
										show-password
									/>
								</el-form-item>
								<el-form-item label="启用SSL">
									<el-switch v-model="emailForm.sslEnabled" />
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="saveEmailSettings">
										保存设置
									</el-button>
									<el-button @click="testEmailConnection">测试连接</el-button>
									<el-button @click="resetEmailForm">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>

						<!-- 存储设置 -->
						<el-tab-pane label="存储设置" name="storage">
							<el-form
								:model="storageForm"
								:rules="storageRules"
								ref="storageFormRef"
								label-width="120px"
							>
								<el-form-item label="存储类型" prop="storageType">
									<el-radio-group v-model="storageForm.storageType">
										<el-radio label="local">本地存储</el-radio>
										<el-radio label="oss">阿里云OSS</el-radio>
										<el-radio label="qiniu">七牛云</el-radio>
									</el-radio-group>
								</el-form-item>
								<el-form-item label="上传路径" prop="uploadPath">
									<el-input v-model="storageForm.uploadPath" />
								</el-form-item>
								<el-form-item label="最大文件大小(MB)" prop="maxFileSize">
									<el-input-number
										v-model="storageForm.maxFileSize"
										:min="1"
										:max="100"
									/>
								</el-form-item>
								<el-form-item label="允许的文件类型" prop="allowedFileTypes">
									<el-input
										v-model="storageForm.allowedFileTypes"
										placeholder="如: jpg,png,pdf,doc"
									/>
								</el-form-item>
								<el-form-item>
									<el-button type="primary" @click="saveStorageSettings">
										保存设置
									</el-button>
									<el-button @click="resetStorageForm">重置</el-button>
								</el-form-item>
							</el-form>
						</el-tab-pane>
					</el-tabs>
				</el-card>
			</el-col>
		</el-row>
	</div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'

// 当前激活的标签页
const activeTab = ref('basic')

// 表单引用
const basicFormRef = ref<FormInstance>()
const securityFormRef = ref<FormInstance>()
const emailFormRef = ref<FormInstance>()
const storageFormRef = ref<FormInstance>()

// 基础设置表单
const basicForm = reactive({
	systemName: '微信小程序管理系统',
	systemDesc: '一个功能完整的微信小程序后台管理系统',
	systemVersion: '1.0.0',
	contactEmail: 'admin@example.com'
})

// 安全设置表单
const securityForm = reactive({
	passwordPolicy: ['requireLowercase', 'requireNumbers'],
	minPasswordLength: 8,
	loginLockEnabled: true,
	maxLoginAttempts: 5,
	sessionTimeout: 30
})

// 邮件设置表单
const emailForm = reactive({
	smtpHost: 'smtp.qq.com',
	smtpPort: 587,
	senderEmail: '',
	senderPassword: '',
	sslEnabled: true
})

// 存储设置表单
const storageForm = reactive({
	storageType: 'local',
	uploadPath: '/uploads',
	maxFileSize: 10,
	allowedFileTypes: 'jpg,png,gif,pdf,doc,docx,xls,xlsx'
})

// 表单验证规则
const basicRules: FormRules = {
	systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
	systemVersion: [{ required: true, message: '请输入系统版本', trigger: 'blur' }],
	contactEmail: [
		{ required: true, message: '请输入联系邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
	]
}

const securityRules: FormRules = {
	minPasswordLength: [{ required: true, message: '请设置最小密码长度', trigger: 'blur' }],
	maxLoginAttempts: [{ required: true, message: '请设置最大失败次数', trigger: 'blur' }],
	sessionTimeout: [{ required: true, message: '请设置会话超时时间', trigger: 'blur' }]
}

const emailRules: FormRules = {
	smtpHost: [{ required: true, message: '请输入SMTP服务器', trigger: 'blur' }],
	smtpPort: [{ required: true, message: '请输入SMTP端口', trigger: 'blur' }],
	senderEmail: [
		{ required: true, message: '请输入发件人邮箱', trigger: 'blur' },
		{ type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
	],
	senderPassword: [{ required: true, message: '请输入发件人密码', trigger: 'blur' }]
}

const storageRules: FormRules = {
	storageType: [{ required: true, message: '请选择存储类型', trigger: 'change' }],
	uploadPath: [{ required: true, message: '请输入上传路径', trigger: 'blur' }],
	maxFileSize: [{ required: true, message: '请设置最大文件大小', trigger: 'blur' }],
	allowedFileTypes: [{ required: true, message: '请输入允许的文件类型', trigger: 'blur' }]
}

// 保存基础设置
const saveBasicSettings = async () => {
	if (!basicFormRef.value) return
	
	try {
		await basicFormRef.value.validate()
		// 模拟保存操作
		ElMessage.success('基础设置保存成功')
	} catch {
		ElMessage.error('请检查表单输入')
	}
}

// 保存安全设置
const saveSecuritySettings = async () => {
	if (!securityFormRef.value) return
	
	try {
		await securityFormRef.value.validate()
		ElMessage.success('安全设置保存成功')
	} catch {
		ElMessage.error('请检查表单输入')
	}
}

// 保存邮件设置
const saveEmailSettings = async () => {
	if (!emailFormRef.value) return
	
	try {
		await emailFormRef.value.validate()
		ElMessage.success('邮件设置保存成功')
	} catch {
		ElMessage.error('请检查表单输入')
	}
}

// 保存存储设置
const saveStorageSettings = async () => {
	if (!storageFormRef.value) return
	
	try {
		await storageFormRef.value.validate()
		ElMessage.success('存储设置保存成功')
	} catch {
		ElMessage.error('请检查表单输入')
	}
}

// 测试邮件连接
const testEmailConnection = () => {
	ElMessage.info('正在测试邮件连接...')
	setTimeout(() => {
		ElMessage.success('邮件连接测试成功')
	}, 2000)
}

// 重置表单
const resetBasicForm = () => {
	basicFormRef.value?.resetFields()
}

const resetSecurityForm = () => {
	securityFormRef.value?.resetFields()
}

const resetEmailForm = () => {
	emailFormRef.value?.resetFields()
}

const resetStorageForm = () => {
	storageFormRef.value?.resetFields()
}
</script>

<style scoped>
.system-settings {
	padding: 0;
}

:deep(.el-tabs__content) {
	padding: 20px;
}

:deep(.el-form-item) {
	margin-bottom: 22px;
}

:deep(.el-checkbox-group .el-checkbox) {
	margin-right: 20px;
	margin-bottom: 10px;
}
</style>
